{% extends 'PHPDishWebBundle::layout.html.twig' %}

{% block title %} {{ topic.title }} {% endblock %}

{% block script %}
    <script type="text/javascript" src="{{ asset('build/js/topic.js') }}"></script>
    <script type="text/javascript">
        window.topicId = {{ topic.id }};
    </script>
{% endblock %}

{% block content %}
    <div class="container" role="main">
        <div class="row">
            <div class="col-md-9">
                <div class="panel panel-u topic-view">
                    <div class="panel-heading clearfix">
                        <div class="author">
                            <a href="{{ path('user_view', {'username': topic.user.username}) }}"><img src="{{ asset(topic.user.avatar)|imagine_filter('middle_square') }}" class="avatar"/></a>
                        </div>
                        <h3 class="title">{{ topic.title }} {% if topic.recommended %}<i class="if i-badge" title="精品话题"></i>{% endif %}</h3>
                        <div class="meta">
                            <ul class="list-unstyled list-inline">
                                <li><i class="if i-calendar"></i> {{ topic.createdAt|time_diff }}</li>
                                <li><i class="if i-user"></i> {{ topic.user.username }}</li>
                                <li><i class="if i-comment"></i> <a href="#reply-list"  data-action="go-reply">{{ replies|length }} 回复</a></li>
                            </ul>
                        </div>
                    </div>
                    <div class="panel-body">
                        <article class="markdown-body body">{{ topic.body|raw }}</article>
                    </div>
                    <div class="panel-footer clearfix">
                        <ul class="list-inline list-unstyled action" data-role="topic-action">
                            {% if is_granted('edit', topic) %}
                            <li><a href="javascript:void(0)" data-action="remove" title="删除"><i class="if i-trash"></i></a></li>
                            <li><a href="{{ path('topic_edit', {id: topic.id}) }}" title="编辑"><i class="if i-edit"></i></a></li>
                            {% endif %}
                            {% if is_granted('ROLE_ADMIN', topic) %}
                                <li><a href="javascript:void(0)" {% if (topic.isRecommended) %}title="取消加精" data-recommend="true" class="cancel-recommend" {% else %}title="加精"{% endif %} data-action="recommend"><i class="if i-good"></i></a></li>
                            {% endif %}
                        </ul>
                        <div class="social-share-container"></div>
                    </div>
                </div>
                <div class="panel panel-u">
                    <div class="panel-heading"><h5>{{ replies|length }} 回复</h5></div>
                    <ul class="list-group reply-list" id="reply-list">
                        {% include 'PHPDishWebBundle:TopicReply:reply_list.html.twig'%}
                    </ul>
                    {% if replies.haveToPaginate %}
                    <div class="panel-footer">
                        {{ pagerfanta(replies, 'twitter_bootstrap3') }}
                    </div>
                    {% endif %}
                </div>
                <div class="panel panel-u reply-topic" id="reply-topic">
                    <div class="panel-heading"><h4>回复</h4></div>
                    <div class="panel-body comment-panel">
                        <div class="notice alert alert-light-blue alert-dismissible fade in" role="alert">
                            <button type="button" class="close" data-dismiss="alert" aria-label="Close">
                                <span aria-hidden="true">&times;</span>
                            </button>
                            <ul class="helpblock list-unstyled">
                                <li>支持 Markdown 格式，常用的Markdown语法 <a href="https://github.com/riku/Markdown-Syntax-CN/blob/master/syntax.md" target="_blank">参考这里</a></li>
                                <li>支持Emoji表情，使用方法参考 <a href="https://www.phpdish.com/topics/6" target="_blank">Emoji 使用教学</a>, Emoji 快速查询看<a href="http://emoji.muan.co/" target="_blank">这里</a></li>
                                <li>上传图片, 支持拖拽和剪切板黏贴上传, 格式的格式：jpg，png, gif</li>
                                <li>支持“@”其他用户</li>
                            </ul>
                        </div>
                        {% if is_granted('IS_AUTHENTICATED_REMEMBERED') %}
                            {{ form_start(form, {'attr': {'id': 'add-reply-form'}}) }}
                                {{ form_widget(form.original_body, {'attr': {'data-role': 'comment-body', 'class': 'form-control body', 'placeholder': '写下你的评论...'}}) }}
                                <div class="tips"><i class="if i-markdown"></i> 请使用 Markdown 语法书写</div>
                                <div class="actions">
                                    <button type="submit" data-role="submit-form" class="btn u-btn-primary" data-loading="回复中">回复</button>
                                    <span class="preview-action" data-action="preview"><i class="if i-view"></i> 预览</span>
                                </div>
                            {{ form_end(form) }}
                            <div class="preview-panel markdown-body hidden" data-role="preview-panel">
                                预览区域
                            </div>
                        {% else %}
                            <textarea class="form-control" placeholder="请先登录后再回复" disabled="disabled"></textarea>
                        {% endif %}
                    </div>
                </div>
            </div>
            <div class="col-md-3">
                {% include 'PHPDishWebBundle:User:user_plate.html.twig' %}
                {{ render(controller('PHPDishForumBundle:Topic:todayHotTopics')) }}
            </div>
            <!-- #sidebar -->
        </div>
    </div>
{% endblock %}